﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--markdown的js文件-->
<script th:src="@{/editormd/examples/js/jquery.min.js}"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.png}" type="text/css">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
    <title th:text="${blog.getBlogTitle()}"></title>
    <!-- BOOTSTRAP CORE CSS -->
    <link th:href="@{/blog/resources/css/bootstrap.min.css}" rel="stylesheet" />
    <!-- CUSTOM CSS -->
    <link th:href="@{/blog/resources/assets/css/style1.css}" rel="stylesheet" />
</head>
<body data-spy="scroll" data-target=".navbar-fixed-top">

    <div class="navbar navbar-default navbar-fixed-top scroll-me">
        <div class="container" style="height: 20px">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
                <ul class="nav navbar-nav navbar-right" style="padding:10px;">
                    <li>
                        <a class="page-scroll" th:href="@{/}">主页</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="https://gitee.com/AegeanP/personal-blog">Gitee</a>
                    </li>
                    <li>
                        <a class="page-scroll" th:href="@{/details/88}">关于</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
     <!-- NAVBAR END  -->
    <br />
    <br />
    <br />
    <!--ABOUT SECTION END  -->
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                     <h1 th:text="${blog.getBlogTitle()}" id="blogTitle"></h1>
                    <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-layout-text-window" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                        <path fill-rule="evenodd" d="M11 15V4h1v11h-1zm4.5-11H.5V3h15v1zM3 6.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
                    </svg>
                    <span style="color: gray" th:text="${blog.getAboutTime()} + '&nbsp&nbsp/&nbsp&nbsp'"></span>
                    <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-chat-text-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM4.5 5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4z"/>
                    </svg>
                    <span>
                        <a style="color: #66b0ff" th:text="${count} + '&nbsp评论'" href="#comment-sec"></a>
                    </span>
                    <span style="color: gray">&nbsp&nbsp/&nbsp&nbsp</span>
                    <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-view-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M3 4.5h10a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3zM1 2a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 2zm0 12a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 14z"/>
                    </svg>
                    <span style="color: gray" th:text="${blog.getBlogViews()} + '&nbsp浏览'"></span>
                    </br>
                    </br>
                    <hr />
                    <article class="blog-post">
                        <div class="body" id="blog-content">
                            <div class="meta">
                                <th:block>
                                    <div id="test-editormd1">
                                        　　<textarea style="display:none;" placeholder="markdown语言" th:utext="${blog.getBlogContent()}">#Editor.md</textarea>
                                    </div>
                                </th:block>
                            </div>
                        </div>
                    </article>
                    <br />
                    <aside class="blog-rights clearfix">
                        <p style="color: gray;font-size: 12px">本站文章除注明转载/出处外，皆为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。</p>
                    </aside>
                    <hr>
                    <!--展示评论-->
                    <th:block th:if="${blog.getEnableComment() == 1}">
                        <th:block th:if="${null != comments}">
                            <div id="comment-sec">
                                <aside class="comments" id="comments">
                                    <br />
                                    <h3>评论区</h3>
                                    <th:block th:each="comment,commentStat:${comments}">
                                        <article class="comment list-group-item">
                                            <header class="clearfix">
                                                <ul class="list-group list-group-flush">
                                                    <span th:text="${commentStat.index + 1} + '楼'"></span>
                                                    <li class="list-group-item">
                                                        <img th:src="@{/img/commentator.png}" class="avatar" style="width:60px; height:60px; border-radius:50%;">
                                                        <strong>&nbsp&nbsp评论者：</strong>
                                                        <span th:text="${comment.commentator}"></span>
                                                        <span class="date" style="float: right;color: gray">
                                                            评论时间：<th:block th:text="${comment.getCreateTime()}"></th:block>
                                                        </span>
                                                        <div class="body">
                                                            <ul>
                                                                <li class="list-group-item">
                                                                    <th:block th:text="${comment.commentBody}"></th:block>
                                                                    <!--回复内容-->
                                                                    <th:block th:if="${comment.replyBody != null}">
                                                                        <br />
                                                                        <hr />
                                                                        <img th:src="@{/img/user.png}" class="avatar" style="width:60px; height:60px; border-radius:50%;">
                                                                        <span>&nbsp&nbsp Aegean</span>
                                                                        <strong>回复 </strong>
                                                                        <span th:text="${comment.commentator} + ' ：'"></span>
                                                                        <span class="date" style="float: right;color: gray">回复时间：<th:block th:text="${comment.getReplyTime()}"></th:block></span>
                                                                        <div class="body">
                                                                            <ul>
                                                                                <li class="list-group-item">
                                                                                    <th:block th:text="${comment.replyBody}"></th:block>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </th:block>
                                                                    <!--回复内容-->
                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </li>
                                                </ul>
                                            </header>
                                        </article>
                                    </th:block>
                                </aside>
                            </div>
                        </th:block>
                    </th:block>
                </div>
            </div>
    <hr>

    <!--评论区-->
    <!--不让评论就不显示评论区-->
    <th:block th:if="${blog.getEnableComment() == 1}">
        <div class="navbar navbar-default" id="comment">
            <div class="container">
                <div class="row text-center">
                    <div class="col-md-8 col-md-offset-2">
                         <h3>添加评论</h3>
                        <br />
                        <div class="form-group">
                            <input type="text" id="blogId" style="display: none" th:value="${blog.getBlogId()}" />
                            <input type="text" class="form-control" placeholder="请输入您的名字(*必填)" id="commentator" required="true"/>
                                <label></label>
                            <input type="text" class="form-control" placeholder="请输入您的电子邮箱(*选填)" id="email"/>
                                <label></label>
                               <textarea id="commentBody" class="form-control" placeholder="请输入评论内容(*必填)" rows="5" required="required"></textarea>
                               <br />
                                <button id="submit" class="btn btn-success" onclick="addComment()">提交评论</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </th:block>
    <hr>
    <!--footer-->
    <div class="navbar navbar-default">
        <div class="row text-center">
            <div class="footer" >
                <div class="row">
                    <div class="copyright">Copyright &copy; 2020 Aegean blog.size <br/>All rights reserved.my personal blog #Version 1.0</div>
                </div>
            </div>
        </div>
    </div>
    <!-- JQuery -->
    <script th:src="@{/blog/resources/js/jquery-1.11.3.min.js}"></script>
   <!-- BOOTSTRAP -->
    <script th:src="@{/blog/resources/js/bootstrap.min.js}"></script>
    <!-- SCROLLING SCRIPTS PLUGIN  -->
    <script th:src="@{/blog/resources/js/jquery.easing.min.js}"></script>
      <!-- CUSTOM SCRIPTS   -->
    <script th:src="@{/blog/resources/assets/js/custom1.js}"></script>
    <!--添加自己写的js-->
    <script th:src="@{/blog/js/details.js}"></script>
    <!--引入sweetalert，这是一个弹框插件-->
    <script th:src="@{/vendor/sweetalert/sweetalert.min.js}"></script>
</body>


<script type="text/javascript">
    $(function () {
        editormd.markdownToHTML("test-editormd1", {
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true  // 默认不解析
        })
    })
</script>
</html>
